<template>
	<view class="content">
		<view class="bookTitle">
			<text>服务专区</text>
			<view class="tips">
			<text>
				Tips:请根据您所需要的服务进行选择大类，然后根据相应的需要进行选择
			</text>
		</view>
		</view>
		<view class="bookServers">
			<view class="bookServer" v-for="server in servicecategories" :key="server" @click="bigServerSelect(server.service_id)">{{server.service_name}}</view>
		</view>
		
	</view>
</template>
<script>
	import config from '@/config/config.js'; // 引入全局配置文件
	export default{
		data(){
			return{
				servicecategories:""
			}
		},
		// 在页面的生命周期钩子中调用获取 Servicecategories 的方法
		onLoad() {
		  this.getServicecategories();
		},
		methods: {
			
			//选择服务的大类
			bigServerSelect:function(service_id){
				
					uni.navigateTo({
					        url: '/pages/booking/servicedetails/servicedetails?service_id='+service_id, // 参数在 URL 中使用 key=value 的形式传递
					      });
				
						 
			},
		  // 获取 Servicecategories 方法
		  getServicecategories() {
		    uni.request({
		       url: config.baseURL + '/servicecategories/all',
		      method: 'GET',
		      success: (res) => {
		        // 请求成功处理
		        if (res.data.status == true) {
		          // 将获取到的 Servicecategories 存储到页面的 data 中，以便页面使用
		          this.servicecategories = res.data.data;
		        } else {
		          // 请求失败处理
		          uni.showToast({
		            title: '获取 Servicecategories 失败',
		            icon: 'none'
		          });
		        }
		      },
		      fail: (err) => {
		        // 请求失败处理
		        uni.showToast({
		          title: '获取 Servicecategories 失败',
		          icon: 'none'
		        });
		        console.error('获取 Servicecategories 失败', err);
		      }
		    });
		  },
		  
		},
		comments:{
			
		}
	}
</script>
<style>
	.content{
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.bookTitle{
		width: 100vw;
		font-size: 30rpx;
		padding: 0 0 0 30rpx;
		font-weight: 700;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: fixed;
		top: 0;
		background-color: white;
	}
	.tips{
		/* position: fixed; */
		width: 75vw;
		height: 5vh;
		font-size: 25rpx;
		color: #747474;
		margin-top: 2vh;
		margin-bottom: 1vh;
	}
	.bookServers{
		width: 100vw;
		margin-top: 115rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background-color:rgb(0,122,255);
	}
	.bookServer{
		width: 80vw;
		color: white;
		height: 240rpx;
		margin: 45rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		font-weight: 700;
		font-family: "微软雅黑";
		border: 1rpx solid white;
		border-radius: 20rpx;
	}
	/* @import url("./booking.css"); */
</style>